<template>
  <div>
    <div class="work">
      <div style="width:1225px;float:left" class="workLeft">
        <Row span="24" :gutter="16" class="bgWrapper" style="color:#fff">
          <Col span="6">
            <div class="cardMoney blue">
                <div class="cardMoneyTop">
                  <p>放款合同总额(元)</p>
                  <p><count-to :end="totalData.loanTotalAmount ? (totalData.loanTotalAmount/100) : 0" :decimals="2"/></p>
                  <p><span>新用户：{{toYuan(totalData.newUserLoanAmount)}}元</span> <span>{{toRate(totalData.newUserLoanRate)}}</span></p>
                  <p><span>老用户：{{toYuan(totalData.oldUserLoanAmount)}}元</span> <span>{{toRate(totalData.oldUserLoanRate)}}</span></p>
                </div>
                <p class="cardMoneyBtm">放款订单数：{{totalData.loanTotalCount}}</p>
            </div>
          </Col>
          <Col span="6">
            <div class="cardMoney green ">
              <div class="cardMoneyTop">
                  <p>收款总额(元)</p>
                  <p><count-to :end="totalData.settleTotalAmount ? (totalData.settleTotalAmount/100) : 0" :decimals="2" /></p>
                  <p><span>新用户：{{toYuan(totalData.newUserSettleAmount)}}元</span> <span>{{toRate(totalData.newUserSettleRate)}}</span></p>
                  <p><span>老用户：{{toYuan(totalData.oldUserSettleAmount)}}元</span> <span>{{toRate(totalData.oldUserSettleRate)}}</span></p>
                </div>
                <p class="cardMoneyBtm">收款订单数：{{totalData.settleTotalCount}}</p>
            </div>
          </Col>
          <Col span="6">
            <div class="cardMoney orange">
                <div class="cardMoneyTop">
                  <p>待收款总额(元)</p>
                  <p><count-to :end="totalData.receivableTotalAmount ? (totalData.receivableTotalAmount/100) : 0" :decimals="2" /></p>
                  <p><span>新用户：{{toYuan(totalData.newUserReceivableAmount)}}元</span> <span>{{toRate(totalData.newUserReceivableRate)}}</span></p>
                  <p><span>老用户：{{toYuan(totalData.oldUserReceivableAmount)}}元</span> <span>{{toRate(totalData.oldUserReceivableRate)}}</span></p>
                </div>
                <p class="cardMoneyBtm">待收利息总额：{{toYuan(totalData.receivableInterest)}}元</p>
            </div>
          </Col>
          <Col span="6">
            <div class="cardMoney red ">
                <div class="cardMoneyTop">
                  <p>逾期催收总额(元)</p>
                  <p><count-to :end="totalData.overdueTotalAmount ? (totalData.overdueTotalAmount/100) : 0" :decimals="2" /></p>
                  <p><span>新用户：{{toYuan(totalData.newUserOverdueAmount)}}元</span> <span>{{toRate(totalData.newUserOverdueRate)}}</span></p>
                  <p><span>老用户：{{toYuan(totalData.oldUserOverdueAmount)}}元</span> <span>{{toRate(totalData.oldUserOverdueRate)}}</span></p>
                </div>
                <p class="cardMoneyBtm">催收利息总额：{{toYuan(totalData.overdueInterest)}}元</p>
            </div>
          </Col>
        </Row>
        <Row span="24" class="basicCase">
            <Col span="19">
              <div class="caseTit">
                <span> <span v-if="!today">今日</span>基本概况</span>
                <span v-if="today">（时间：{{getLocalDate(value3)}}）</span>
              </div>
            </Col>
              <Col span="5">
                <div class="caseDate" style="background:pink">
                <div class="borderGray">
                  <DatePicker
                    :open="open1"
                    confirm
                    type="date"
                    :options="options"
                    @on-change="handleChange1"
                    @on-clear="handleClear1"
                    @on-ok="handleOk1">
                    <p @click="handleClick1">
                      <span style="color:#1088FF;">查看往期</span>
                      <img src="~@/assets/dateLeft.png" alt="" style="float:right;margin-left:6px;margin-top:1px">
                    </p>
                  </DatePicker>
                </div>
                 <div class="borderGray" style="padding: 6px 4px;" @click.prevent="subDate"><Icon type="ios-arrow-back" size="18"/></div>
                 <div class="borderGray"  @click.prevent="todayDate()">今日</div>
                 <div class="borderGray" style="padding: 6px 4px;" @click.prevent="addDate" v-if="btnShow"><Icon type="ios-arrow-forward"  size="18"/></div>
                  <div class="borderGray" style="padding: 6px 4px;" v-else><Icon type="ios-arrow-forward"  size="18" color="#eee"/></div>
                </div>
            </Col>
        </Row>
        <div class="cardWrapper">
           <Card :bordered="false" :dis-hover="true" :padding="0">
              <p slot="title" class="tit"> {{getLocalDate(value3)}} 放款订单</p>
              <Row span="24">
                <Col span="6" class="cardCol">
                  <h6>已放款订单数</h6>
                  <p>{{basicData.loanCount}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>放款合同金额(元)</h6>
                  <p>{{toYuan(basicData.loanAmount)}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <!--实际放款金额-->
                  <h6>放款本金(元)</h6>
                  <p>{{toYuan(basicData.realAmount)}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>与昨日订单数之差</h6>
                  <p :class="active?'greenCol':'redCol' ">{{basicData.beforeLoanCount}}</p>
                </Col>
              </Row>
            </Card>
        </div>
        <div class="cardWrapper">
           <Card :bordered="false" :dis-hover="true" :padding="0">
              <p slot="title" class="tit">{{getLocalDate(value3)}} 待收/已收订单<span>（申请时间：{{ basicData.applyDateTime}}）</span></p>
              <Row span="24">
                <Col span="6" class="cardCol">
                  <!-- <h6>待收/已收订单数</h6> -->
                   <h6>当天到期应结清总数/当天到期当天结清</h6>
                   <p><span>{{basicData.receivableCount}}</span><span>{{basicData.settleCount}}</span></p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>待收/已收金额(元)</h6>
                  <p><span>{{toYuan(basicData.receivableAmount)}}</span><span>{{toYuan(basicData.settleAmount)}}</span></p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>待收/已收利息(元)</h6>
                   <p><span>{{toYuan(basicData.receivableInterest)}}</span><span>{{toYuan(basicData.settleInterest)}}</span></p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>结清占比率</h6>
                  <p>{{toRate(basicData.repayRatio)}}</p>
                </Col>
              </Row>
            </Card>
        </div>
        <div class="cardWrapper">
           <Card :bordered="false" :dis-hover="true" :padding="0">
              <p slot="title" class="tit">{{getLocalDate(value3)}} 复借订单</p>
              <Row span="24">
                <Col span="6" class="cardCol">
                  <!-- <h6>完成人数</h6> -->
                  <h6>结清人数</h6>
                  <p>{{basicData.repeatDoneCount}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>复借订单数</h6>
                  <p>{{basicData.repeatCount}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>复借金额(元)</h6>
                  <p>{{toYuan(basicData.repeatAmount)}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>复借比例</h6>
                  <p>{{toRate(basicData.repeatRatio)}}</p>
                </Col>
              </Row>
            </Card>
        </div>
         <div class="cardWrapper" >
          <Card :bordered="false" :dis-hover="true" :padding="0">
              <p slot="title" class="tit"  style="border-left:5px solid #FC6665;margin-left:-18px;padding-left:13px">历史坏账订单<span>（逾期15天以上）</span></p>
              <Row span="24">
                <Col span="6" class="cardCol">
                  <h6>坏账订单数</h6>
                   <p class="redCol">{{badOrder.overdueCount}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>坏账合同金额(元)</h6>
                  <p class="redCol">{{toYuan(badOrder.overdueLoanAmount)}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>新/老用户逾期人数</h6>
                   <p class="redCol"><span>{{badOrder.newUserOverdueCount}}</span><span>{{badOrder.oldUserOverdueCount}}</span></p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>坏账率</h6>
                  <p class="redCol">{{toRate(badOrder.overdueRate)}}</p>
                </Col>
              </Row>
            </Card>
        </div>
      </div>
      <div class="workRight">
        <Card class="card-title">
          <p slot="title" class="card-top-title">
            <img src="../../assets/total.png" class="title-icon">
            <span class="title-name">订单总计</span>
          </p>
          <div slot="extra" style="width:138px;" @click.prevent="">
            <div class="top-tabs">
              <div class="top-tab" @click.prevent="changeType(0)" :class="type==0?'active-tab':''">订单</div>
              <div class="top-tab" @click.prevent="changeType(1)" :class="type==1?'active-tab':''">金额</div>
            </div>
            <div class="date-a">
              <DatePicker
                :open="open"
                :value="value2"
                confirm
                :options="options"
                type="daterange"
                @on-change="handleChange"
                @on-clear="handleClear"
                @on-ok="handleOk">
                <a href="javascript:void(0)" @click="handleClick">
                  <img src="../../assets/dateRight.png" style="width:24px;height:24px;">
                </a>
              </DatePicker>
            </div>
          </div>
          <div class="card-con">
              <Col class="card-con-box" span="12">
                <i-circle style="width:132px;height:132px;" :percent='type==0?(orderData.orderSettleRate?Math.floor(orderData.orderSettleRate*100):0):(orderData.moneySettleRate?Math.floor(orderData.moneySettleRate*100):0)' stroke-color="#19be6b" stroke-linecap="square" trail-color="#F5F7F9">
                  <div class="demo-Circle-custom">
                    <p v-if="type == 0">总结清率</p>
                    <p v-if="type == 1">总回款率</p>
                    <h1>{{type==0?(orderData.orderSettleRate?(orderData.orderSettleRate*100).toFixed(2):0):(orderData.moneySettleRate?(orderData.moneySettleRate*100).toFixed(2):0)}}%</h1>
                  </div>
                </i-circle>
              </Col>
              <Col class="card-con-box" span="12">
                <i-circle style="width:132px;height:132px;" :percent='type==0?(orderData.orderOverdueRate?Math.floor(orderData.orderOverdueRate*100):0):0' stroke-color="#FD6867" stroke-linecap="square" trail-color="#F5F7F9">
                  <div class="demo-Circle-custom">
                    <p v-if="type == 0">总逾期率</p>
                    <p v-if="type == 1" style="color:#eee;">总逾期率</p>
                    <!--<h1>{{type==0?(orderData.orderOverdueRate?(orderData.orderOverdueRate*100).toFixed(2):0):(orderData.moneyOverdueRate?(orderData.moneyOverdueRate*100).toFixed(2):0)}}%</h1>-->
                    <h1 v-if="type == 0">{{(orderData.orderOverdueRate?(orderData.orderOverdueRate*100).toFixed(2):0)}}%</h1>
                    <h1 v-if="type == 1" style="color:#eee;">0%</h1>
                  </div>
                </i-circle>
              </Col>
              <Col class="card-con-box" span="12">
                <i-circle style="width:132px;height:132px;" :percent='type==0?(orderData.orderNewUserRepayRate?Math.floor(orderData.orderNewUserRepayRate*100):0):(orderData.moneyNewUserSettleRate?Math.floor(orderData.moneyNewUserSettleRate*100):0)' stroke-color="#ff9900" stroke-linecap="square" trail-color="#F5F7F9">
                  <div class="demo-Circle-custom">
                    <p v-if="type == 0">新客结清率</p>
                    <p v-if="type == 1">新客还款率</p>
                    <h1>{{type==0?(orderData.orderNewUserRepayRate?(orderData.orderNewUserRepayRate*100).toFixed(2):0):(orderData.moneyNewUserSettleRate?(orderData.moneyNewUserSettleRate*100).toFixed(2):0)}}%</h1>
                  </div>
                </i-circle>
              </Col>
              <Col class="card-con-box" span="12">
                <i-circle style="width:132px;height:132px;" :percent='type==0?(orderData.orderOldUserRepayRate?Math.floor(orderData.orderOldUserRepayRate*100):0):(orderData.moneyOldUserOverdueRate?Math.floor(orderData.moneyOldUserOverdueRate*100):0)' stroke-color="#12B9FF" stroke-linecap="square" trail-color="#F5F7F9">
                  <div class="demo-Circle-custom">
                    <p v-if="type == 0">老客结清率</p>
                    <p v-if="type == 1">老客还款率</p>
                    <h1>{{type==0?(orderData.orderOldUserRepayRate?(orderData.orderOldUserRepayRate*100).toFixed(2):0):(orderData.moneyOldUserOverdueRate?(orderData.moneyOldUserOverdueRate*100).toFixed(2):0)}}%</h1>
                  </div>
                </i-circle>
              </Col>
          </div>
          <div style="clear: both"></div>
        </Card>
        <Card class="card-title">
          <div class="card-second-title">
            <p class="card-second-title-name">运营数据统计</p>
          </div>
          <div class="card-second-con">
              <div class="second-con-box" style="margin-right: 15px;">
                <div class="con-top">
                  <p class="con-top-one">注册总数</p>
                  <p class="con-top-two">{{operateData.registerCount?operateData.registerCount:0}}</p>
                </div>
                <div class="con-bottom">
                  <div class="con-bottom-box">
                    <p class="con-top-three">今日注册</p>
                    <p class="con-top-four">{{operateData.todayRegisterCount?operateData.todayRegisterCount:0}}</p>
                  </div>
                </div>
              </div>
              <div class="second-con-box">
                <div class="con-top con-left-top">
                  <p class="con-top-one">申请总数</p>
                  <p class="con-top-two">{{operateData.loanApplyCount?operateData.loanApplyCount:0}}</p>
                </div>
                <div class="con-bottom" >
                  <div class="con-bottom-box" style="margin-right: 52px;">
                    <p class="con-top-three">今日申请</p>
                    <p class="con-top-four">{{operateData.todayLoanApplyCount?operateData.todayLoanApplyCount:0}}</p>
                  </div>
                  <div class="con-bottom-box">
                    <p class="con-top-three">风控通过</p>
                    <p class="con-top-four">{{operateData.todayRiskLoanCount?operateData.todayRiskLoanCount:0}}</p>
                  </div>
                </div>
              </div>
          </div>
          <p style="line-height: 48px;color:#515A6E;border-bottom: 1px solid #F0F0F0;margin-top: 8px;">渠道来源统计（注册量）</p>
          <div id="main" style="width: 400px;height:200px;margin: 32px auto;"></div>
        </Card>
      </div>
      <div style="clear: both;"></div>
    </div>


</div>
</template>

<script>
import echarts from 'echarts'
import CountTo from '../template/count-to'
  // import { ChartPie, ChartBar } from '_c/charts'
  // import Example from './example.vue'
  export default {
    props:['nameSelect'],
    name: 'home',
    components: {
      CountTo
    },
    data () {
      return {
        data:[],
        tagL:[],
        open1: false,
        value3: (new Date().getTime()),
        value2: [],
        value1:'',
        tag: {
          'title': '工作台',
          'path': '/work',
        },
        open: false,
        orderData:[],
        active:false,
        operateData:[],
        type:0,
        totalData:{},
        basicData:{},
        badOrder:{},
        today:false,
        channelList:[],
        btnShow:false,
        options:{
          disabledDate (date) {
            return date && date.valueOf() > Date.now() ;
          }
        }
      }
    },
    created () {
      this.value3 = (new Date().getTime())
      this.getOrder();
      this.getOperate();
    },
    mounted(){
      this.tag.name = this.nameSelect;
      this.$store.commit('changeTag', this.tag.path);
      this.$store.commit('openPage', this.tag);
      this.getTotalData();
      this.getBasicData();
      this.getBadOrder();
    },
    methods: {
      addDate(){ //加日期
        let today = new Date().getTime();
        let todayString = new Date(this.getLocalDate(today)).getTime();
        let dateString = new Date(this.getLocalDate(this.value3)).getTime();
        this.value3 = dateString+86400000;
        if(this.value3 < todayString){
          this.today = true;
          this.btnShow = true;
          this.getBasicData(new Date(this.getLocalDate(this.value3)))
        }else if(this.value3  == todayString){
          this.today = false;
          this.btnShow = false;
          this.getBasicData()
        }
      },
      subDate(){ //减日期
        this.value3 = this.value3 - 86400000;
        this.today = true;
        this.btnShow = true;
        // console.log(this.getLocalDate(this.value3));
        this.getBasicData(new Date(this.getLocalDate(this.value3)))
      },
      todayDate(){ //今日
        this.value3 = new Date().getTime();
        this.today = false;
        this.btnShow = false;
        this.getBasicData();
      },
      getLocalDate(time) {//时间戳转日期
        if(time){
          const date = new Date(time);
          const year = date.getFullYear()
          const month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
          const day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate()
          const t1 = [year, month, day].join('-')
          return `${t1}`
        }else{
          return '—'
        }
      },
      getMap(data){
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color:['#019AFE','#FE9325','#F55858','#515A6E','#FECF24','#4D4DFF','#27CA71','#1CD4EA','#CB3BE6','#7CDD35'],
          legend: {
            orient: 'vertical',
            x: 'left',
            data:[]
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['50%', '70%'],
              label: {
                normal: {
                  formatter: ' {b|{b}：}{per|{d}%}  ',
                  backgroundColor: '#fff',
                  borderColor: '#fff',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    a: {
                      color: '#999',
                      lineHeight: 12,
                      align: 'center'
                    },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    b: {
                      fontSize: 12,
                      lineHeight: 33
                    },
                    per: {
                      color: '#eee',
                      backgroundColor: '#334455',
                      padding: [2, 4],
                      borderRadius: 2
                    }
                  }
                }
              },
              data:data,
            }
          ]
        };
        myChart.setOption(option);
      },
      changeType(i){
        this.type = i;
      },
      handleClick () {
        this.open = !this.open;
      },
      handleChange (date) {
        this.value2 = date;
      },
      handleClear () {
          this.open = false;
        this.getOrder();
      },
      handleOk () {
        this.open = false;
        this.getOrder(this.value2[0],this.value2[1])
      },
      handleClick1 () {
        this.open1 = !this.open1;
      },
      handleChange1 (date) {
        this.value1 = new Date(date);
      },
      handleClear1 () {
        this.open1 = false;
      },
      handleOk1 () {
        this.open1 = false;
        this.value3 = this.value1;
        let today = new Date().getTime();
        let todayString = new Date(this.getLocalDate(today)).getTime();
        let dateString = new Date(this.getLocalDate(this.value3)).getTime();
        if(todayString == dateString){
          this.today = false;
        }else{
          this.today = true;
        }
        // console.log(this.value3,'value3');
        this.getBasicData(this.value3)
      },
      toYuan(money){
        if(money){
          return (money/100).toFixed(2)
        }else{
          return 0
        }
      },
      toRate(rate){
        if(rate){
          return (rate*100).toFixed(2)+'%'
        }else{
          return '0.00%'
        }
      },
    getLocalDate(time) {//时间戳转日期
    if(time){
      const date = new Date(time);
      const year = date.getFullYear()
      const month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
      const day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate()
      const t1 = [year, month, day].join('-')
      return `${t1}`
    }else{
      return '—'
    }
 },
      getOrder (beginTime,endTime) {
        this.$post('/bkworkbench/repay/data',{
          beginTime:beginTime,
          endTime:endTime,
        })
          .then((res) => {
            if(res.code === 0){
              console.log(res)
              this.orderData = res.data;
            }
        })
      },
      getOperate () {
        this.$post('/bkworkbench/operate/data')
          .then((res) => {
            if (res.code === 0) {
              console.log(res)
              this.operateData = res.data;
              let channelList = res.data.channelDataPVOList;
              channelList.map((item, index) => {
                let name = item.channelName?item.channelName:'未知'
                // this.channelList.push({name:`hhh${index}`,value:20})
                this.channelList.push({name: name, value: item.channelRegisterRate})
              })
              console.log(this.channelList, 'channelList')
              this.getMap(this.channelList)
            }
          })
    },
      getTotalData(){
        this.$post('/bkworkbench/total/data')
          .then(res => {
            let data = res.data;
            this.totalData = data;
          } )

      },
      getBasicData(date){
        this.$post('/bkworkbench/today/data',{date:date})
          .then(res => {
            // console.log(res.data,'基本情况');
            let data = res.data;
            if(data.beforeLoanCount < 0){
              this.active = true
            }else{
              this.active = false
            }
            this.basicData = data;
            if(data.applyDateTime){
              this.basicData.applyDateTime =  this.getLocalDate(data.applyDateTime)
            }else{
              this.basicData.applyDateTime = this.getLocalDate(new Date(this.value3).getTime()-86400000*6);
            }
          })
      },
      getBadOrder(){
        this.$post('/bkworkbench/overdue/data')
          .then(res => {
            // console.log(res.data,'坏账');
            let data = res.data;
            this.badOrder = data

          })
      }
    }
  }
</script>
<style lang="less" scoped >
  .work{
    overflow-x: auto;
    overflow-y: hidden;
    width:1720px;
    .workLeft{
      .bgWrapper{
        .cardMoney{
          width:100%;
          height:180px;
          position: relative;
          padding-top:17px;
          .cardMoneyTop{
            padding:0 20px;
            p{
              &:nth-of-type(1){
                font-size:14px;
              }
              &:nth-of-type(2){
                font-size:24px;
                margin-top:5px;
                margin-bottom:5px;
                font-weight:600;
              }
              &:nth-of-type(3),&:nth-of-type(4){
                font-size:12px;
                margin-bottom:6px;
                overflow: hidden;
                span:nth-of-type(1){
                  float:left;
                }
                span:nth-of-type(2){
                  float:right;
                }
              }
            }
          }
         .cardMoneyBtm{
            position: absolute;
            bottom:12px;
            font-size:14px;
            width:100%;
            text-align: center;
          }
        }
        .blue{
          background: url('~@/assets/bluebg.png') no-repeat center;
        }
        .green{
          background: url('~@/assets/greenbg.png') no-repeat center;
        }
        .orange{
          background: url('~@/assets/orangebg.png') no-repeat center;
        }
        .red{
          background: url('~@/assets/redbg.png') no-repeat center;
        }
      }
    .basicCase{
      background: #fff;
      margin:10px 0;
      padding: 23px 0;
      color:#333;
      .caseTit{
        padding-left:14px;
        font-size:16px;
        border-left:5px solid #FE9625;
        span:nth-of-type(1){
          font-size:18px;
          color:#515A6E;
          font-weight:600;
        }
        span:nth-of-type(2){
          font-size:16px;
          color:#FE9625;
          margin-left:8px;
        }
      }
      .caseDate{
        .borderGray{
          height:33px;
          border: 1px solid #E4E4E4;
          text-align: center;
          line-height: 33px;
        }
        >div{
        float: left;
        &:nth-of-type(1){
          width:100px;
          margin-right:6px;
          font-size:14px;
        }
        &:nth-of-type(2),&:nth-of-type(4){
          width:28px;
          font-size:14px;
          cursor: pointer;
        }
        &:nth-of-type(3){
          width:48px;
          margin:0 10px;
          color:#656C7F;
          font-size:14px;
          cursor: pointer;

        }
      }
      }
    }
    .cardWrapper{
      padding:0 18px;
      margin-bottom:10px;
      background: #fff;
      .tit{
        font-size:16px;
        color:#515A6E;
        span{
          font-size:14px;
          color:#515A6E;
          margin-left:18px;
          font-weight:500;
        }
      }
      /deep/ .ivu-card-head {
        border-bottom: 1px solid #F0F0F0;
        padding: 16px 16px 16px 0;
        line-height: 1;
      }
      .cardCol{
        // text-align: center;
        h6{
          font-size:14px;
          color:#515A6E;
          margin:19px 0 13px;
          font-weight:normal;
        }
        p{
          font-size:18px;
          color: #2D8CF0;
          margin-bottom:24px;
          font-weight:600;
          span:nth-of-type(1){
            color:#515A6E;
            padding-right:6px;
            border-right:2px solid #515A6E;
          }
          span:nth-of-type(2){
            margin-left:6px;
          }
        }
        .redCol{
          color:#FC6665;
          span:nth-of-type(1){
            color:#FC6665
          }
        }
        .greenCol{
          color:#19be6b
        }
      }
      color:#333;
    }
  }
  }

    .workRight{
      li{
        list-style: none;
     }
      width:435px;
      margin-left:20px;
      float:left;
      .card-title{
        width:435px;border:0;background:#fff;margin-bottom: 17px;
        .card-top-title{
          height:32px;line-height: 32px;vertical-align: middle;
          .title-icon{
            display: inline-block;width:18px;height:18px;float: left;
            margin-top: 7px;
          }
          .title-name{
            font-size:18px;color:#4B4F58;font-weight:600;margin-left: 18px;
          }
        }
        .date-a{
          display: inline-block;
          width:24px;
          height:24px;
          margin-left: 10px;
          overflow: hidden;
          background: url("../../assets/dateRight.png") 100% 100%;
          /deep/ .datePick{
            width:24px;
            height: 24px;
          }
        }
        .top-tabs{
          display: inline-block;
          width:96px;
          color:#fff;
          font-size:12px;
          height:24px;
          border:1px solid #1188FF;
          border-radius:2px;
          line-height: 24px;
          color:#1188FF;
          margin-top: 5px;
          cursor:pointer;
          .top-tab{
            width:47px;
            height:22px;
            line-height: 22px;
            display: inline-block;
            float: left;
            text-align: center;
          }
          .active-tab{
            background: #1188FF;
            color:#fff;
          }

        }
        .card-second-title{
          width:100%;
          height:18px;
          margin: 7px 0;
          /deep/ .card-second-title-name{
            border-left:5px solid #019AFE;
            height:18px;
            font-size: 18px;
            line-height: 18px;
            text-align: left;
            padding-left: 10px;
            font-weight: bolder;
            margin-left: -16px;
          }
        }
        .card-second-con{
          /*height: 458px;*/
          margin-top: 16px;
          .second-con-box{
            width:190px;
            height:130px;
            display: inline-block;
            box-shadow:0px 2px 8px 0px rgba(75,79,88,0.2);
            background:rgba(255,255,255,1);
            .con-top{
              height: 65px;
              color:#fff;
              text-align: center;
              background: url("../../assets/reg.png") 100% 100%;
              .con-top-one{
                line-height: 38px;
                font-size:14px;
              }
              .con-top-two{
                font-size:18px;
                font-weight: bolder;
                line-height: 38px;
                margin-top: -13px;
              }
            }
            .con-bottom{
              height:65px;
              text-align: center;
              font-size:12px;
              .con-bottom-box{
                width:50px;
                height:38px;
                color: #4B4F58;
                display: inline-block;
                margin-top: 18px;
                .con-top-four{
                  font-weight: bolder;
                  color:#515A6E;
                }
              }
            }
            .con-left-top{
              height: 65px;
              background: url("../../assets/apply.png") 100% 100%;
            }
          }
        }
        .card-con{
          width:100%;
          height:auto;
          .card-con-box{
            text-align:center;margin-top: 20px;
            .demo-Circle-custom{
              p{
                font-size:12px;
                color:#4B4F58;
              }
              h1{
                font-size: 20px;
                font-weight: bolder;
              }
            }
          }
        }
      }
    }
  .common{
    float: left;
    height: 100%;
    display: table;
    text-align: center;
  }
  .size{
    width: 100%;
    height: 100%;
  }
  .middle-center{
    display: table-cell;
    vertical-align: middle;
  }
  .blue-card-wrapper{
    .size;
    overflow: hidden;
    .ivu-card-body{
      height:100%;
      .size;
    }
    .content-con{
      .size;
      position: relative;
      .left-area{
        .common;
        & > .icon{
          .middle-center;
        }
      }
      .right-area{
        .common;
        & > div{
          .middle-center;
        }
      }
    }
  }
  .con-title{
    color: #000;
    line-height: 40px;
    border-left: solid 3px #20a0ff;
    padding-left: 15px;
    margin: 10px 0;
    margin-bottom: 20px;
  }
  .base-work-item{
    width: 100%;
    color: #fff;
  }
  .base-work-each{
    text-align: center;
  }
  .title {
    margin-top: 0px;
    height: 40px;
    overflow: hidden;
  }
  /deep/ .ivu-icon{
    display: table-cell;
  }


      .demo-Circle-custom{
        & h1{
            color: #3f414d;
            font-size: 28px;
            font-weight: normal;
        }
        & p{
            color: #657180;
            font-size: 14px;
            margin: 10px 0 15px;
        }
        & span{
            display: block;
            padding-top: 15px;
            color: #657180;
            font-size: 14px;
            &:before{
                content: '';
                display: block;
                width: 50px;
                height: 1px;
                margin: 0 auto;
                background: #e0e3e6;
                position: relative;
                top: -15px;
            };
        }
        & span i{
            font-style: normal;
            color: #3f414d;
        }
    }
</style>
<style lang="less">
  .count-style{
    font-size: 50px;
  }
</style>
